<template>
    <div class="demo-basic">
        <section>
            <h3>一行一列</h3>
            <Form :label-width="60" grid="1">
                <Form-item label="表单项1:">
                    <Input placeholder="请输入..." class="ivu-form-item-width"></Input>
                </Form-item>
                <Form-item label="表单项2:">
                    <Select clearable class="ivu-form-item-width">
                        <Option :value="'value1'">{{ 'label1' }}</Option>
                        <Option :value="'value2'">{{ 'label2' }}</Option>
                        <Option :value="'value3'">{{ 'label3' }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="表单项3:">
                    <DatePicker type="date" placeholder="选择" class="ivu-form-item-width"></DatePicker>
                </Form-item>
                <Form-item label="表单项4:">
                    <Select clearable class="ivu-form-item-width-3xs">
                        <Option :value="'value1'">{{ 'label1' }}</Option>
                        <Option :value="'value2'">{{ 'label2' }}</Option>
                        <Option :value="'value3'">{{ 'label3' }}</Option>
                    </Select>
                    <Input placeholder="请输入..." class="ivu-form-item-width-s"></Input>
                </Form-item>
                <Form-item label="表单项5:">
                    <DatePicker type="date" placeholder="选择" class="ivu-form-item-width-xs"></DatePicker>
                    <Input placeholder="请输入..." class="ivu-form-item-width-xs"></Input>
                </Form-item>
            </Form>
        </section>

        <section>
            <h3>一行两列</h3>
            <Form :label-width="60" grid="2">
                <Form-item label="表单项1:">
                    <Input placeholder="请输入..." class="ivu-form-item-width"></Input>
                </Form-item>
                <Form-item label="表单项2:">
                    <Select clearable class="ivu-form-item-width">
                        <Option :value="'value1'">{{ 'label1' }}</Option>
                        <Option :value="'value2'">{{ 'label2' }}</Option>
                        <Option :value="'value3'">{{ 'label3' }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="表单项3:">
                    <Input type="textarea" class="ivu-form-item-width-2xl"></Input>
                </Form-item>
            </Form>
        </section>

        <section>
            <h3>一行三列</h3>
            <Form :label-width="60" grid="3">
                <Form-item label="表单项1:">
                    <Input placeholder="请输入..." class="ivu-form-item-width"></Input>
                </Form-item>
                <Form-item label="表单项2:">
                    <Select clearable class="ivu-form-item-width">
                        <Option :value="'value1'">{{ 'label1' }}</Option>
                        <Option :value="'value2'">{{ 'label2' }}</Option>
                        <Option :value="'value3'">{{ 'label3' }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="表单项3:">
                    <DatePicker type="date" placeholder="选择" class="ivu-form-item-width"></DatePicker>
                </Form-item>
            </Form>
        </section>

        <section>
            <h3>紧凑型</h3>
            <Form grid="0">
                <Form-item>
                    <DatePicker type="date" placeholder="选择" class="ivu-form-item-width-s"></DatePicker>
                </Form-item>
                <Form-item>
                    <DatePicker type="date" placeholder="选择" class="ivu-form-item-width-s"></DatePicker>
                </Form-item>
                <Form-item>
                    <Select clearable class="ivu-form-item-width">
                        <Option :value="'value1'">{{ 'label1' }}</Option>
                        <Option :value="'value2'">{{ 'label2' }}</Option>
                        <Option :value="'value3'">{{ 'label3' }}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Input placeholder="请输入..." class="ivu-form-item-width-s"></Input>
                </Form-item>
                <div class="ivu-from-item-oper">
                    <z-button type="add" shape="icon"></z-button>
                    <z-button type="remove" shape="icon"></z-button>
                </div>
            </Form>
        </section>
    </div>
</template>

<style lang="scss">
    @import 'styleKit.scss';
    $form-item-label-width: 100px;
    $form-item-width-gap: 15px - 4px;
    $form-item-width-3xs: 60px;
    $form-item-width-2xs: 75px;
    $form-item-width-xs: 130px;
    $form-item-width-s: 200px;
    $form-item-width: 275px;
    $form-item-width-l: 380px;
    $form-item-width-2xl: 665px;
    $form-item-width-3xl: 725px;

    .ivu-form-grid-1 {
        max-width: $form-item-label-width + $form-item-width-l;
    }
    .ivu-form-grid-2 {
        max-width: ($form-item-label-width + $form-item-width-l) * 2;
    }
    .ivu-form-grid-3 {
        max-width: ($form-item-label-width + $form-item-width-l) * 3;
    }
    .ivu-form-grid-0, .ivu-form-grid-1, .ivu-form-grid-2, .ivu-form-grid-3 {
        .ivu-form-item {
            display:  inline-block;
        }
    }
    .ivu-form-grid-1, .ivu-form-grid-2, .ivu-form-grid-3 {
        .ivu-form-item:not(:nth-last-of-type(1)) {
            margin-right: 50px;
        }
    }

    .ivu-form-item-width-3xs {
        width: $form-item-width-3xs;
    }
    .ivu-form-item-width-2xs {
        width: $form-item-width-2xs;
    }
    .ivu-form-item-width-xs {
        width: $form-item-width-xs;
    }
    .ivu-form-item-width-s {
        width: $form-item-width-s;
    }
    .ivu-form-item-width {
        width: $form-item-width;
    }
    .ivu-form-item-width-l {
        width: $form-item-width-l;
    }
    .ivu-form-item-width-2xl {
        width: $form-item-width-2xl;
    }
    .ivu-form-item-width-3xl {
        width: $form-item-width-3xl;
    }
    .ivu-from-item-oper {
        display: inline-block;
        line-height: 30px;
        padding-left: 5px;
        button:not(:nth-of-type(1)) {
            margin-left: 10px;
        }
    }

    .ivu-form-grid-1, .ivu-form-grid-2, .ivu-form-grid-3 {
        .ivu-form-item-content {
            .ivu-select, .ivu-date-picker, .ivu-input-wrapper {
                margin-right: $form-item-width-gap;
            }
        }
    }

    .ivu-form-item-required .ivu-form-item-label:before {
        content: "\e66a";
        color: #ffbe2e;
        font-family: "iconfont";
        font-size: 13px;
        margin-left: -13px;
        margin-right: 0;
    }
</style>
